<template>
<!-- 积分抽奖订单 - 查看全部 -->
	<view>
		<van-empty v-show="isEmpty" class="custom-image" image="/static/img/empty.png" :description="i18n.user_page.lottery_order.t1">
			<!--您还没有开奖订单,赶快去抽奖吧!-->
			<van-button style="width: 240rpx;" round type="warning" class="bottom-button" @click="goLottery">
				{{i18n.user_page.lottery_order.t2}}
				<!-- 去抽奖 -->
			</van-button>
		</van-empty>
		<van-pull-refresh
			v-show="!isEmpty"
			v-model="refreshing"
			:pulling-text="i18n.common.pulling_text"
			:loading-text="i18n.common.loading"
			:loosing-text="i18n.common.loosing_text"
			@refresh="onRefresh">
			<van-list
				v-model="loading"
				:finished="finished"
				:finished-text="i18n.common.no_more"
				@load="onLoad2">
				<!--没有更多了-->
				<!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
				<view v-for="(item,index) in goodList" :key="index" class="cell bg-white my-1 my-no-top br-6">
					<view class="item-top d-flex j-sb border-bottom p-1">
						<view class="text-light-muted text-md f12">
							<!--最后抽奖时间-->
							{{i18n.user_page.lottery_order.t3}}：{{dataFormat(new Date(item.create_time))}}
						</view>
						<view class="text-warning text-md f12">
							{{getStatus(item)}}
						</view>
					</view>
					<view class="item-center d-flex border-bottom">
						<view @click="itemClick(item)" style="width: 25%;" class="item-center-left p-2">
							<image style="width: 160rpx; height: auto; max-height: 480rpx" mode="widthFix" :src="item.good_header"></image>
						</view>
						<view style="width: 75%;" class="item-center-right d-flex flex-column">
							<view class="text-lg text-black p-1">{{item.good_name}}</view>
							<view v-if="item.status == '进行中' || item.status == '倒计时'" class="p-1">
								<van-progress :show-pivot="false" stroke-width="5px" color="rgb(243, 145, 43)"
									:percentage="item.progress" />
								<view class="d-flex j-sb f12">
									<!-- 总需 -->
									<text>
										{{i18n.cart_page.t7}} {{item.need_people}}
									</text>
									<!-- 剩余 -->
									<text class="text-warning">
										{{i18n.home_page.tips.t7}} {{item.need_people-item.now_people}}
									</text>
								</view>
								<view class="pt-0 f12">
									<!-- 本次参与人数 -->
									<text>
										{{i18n.user_page.lottery_order.t6}}
										<text class="text-warning">{{' ' + item.count_num + ' '}}</text>
										<!-- 人次 -->
										{{i18n.winner_page.t5}}
									</text>
								</view>
							</view>
							<view v-else-if="item.status=='已揭晓'" class="p-1">
								<view>
									<!-- 获得者 -->
									<text class="text-light-muted f12">
										{{i18n.user_page.lottery_order.t7}}:
									</text>
									<text class="text-black b2 f12">{{item.nick_name}}</text>
								</view>
								<view>
									<!-- 幸运号码 -->
									<text class="text-light-muted f12">{{i18n.user_page.lottery_order.t8}}:</text>
									<text class="text-black b2 f12">{{item.win_num}}</text>
								</view>
								<view>
									<!-- 抽奖次数 -->
									<text class="text-light-muted f12">{{i18n.user_page.lottery_order.t9}}:</text>
									<text class="text-black b2 f12">{{item.count_num}}</text>
								</view>
								<view>
									<!-- 开奖时间 -->
									<text class="text-light-muted f12">{{i18n.user_page.lottery_order.t10}}:</text>
									<text class="text-black b2 f12">{{item.real_lottery_time}}</text>
								</view>
							</view>

						</view>
					</view>
					<view class="item-bottom">
						<view class="p-1 d-flex j-end a-center">
							<!-- 追加 -->
							<van-button
								v-if="item.status=='进行中'"
								@click="itemClick(item)" size="small"
								class="bg-warning text-white mr-1 br-4 no-br">
								{{i18n.user_page.lottery_order.t11}}
							</van-button>
							<!-- 我的号码 -->
							<van-button size="small" @click="showDrawer(item)" class="bg-warning text-white br-4 no-br">
								{{i18n.user_page.lottery_order.t12}}
							</van-button>
						</view>
					</view>
				</view>
			</van-list>
		</van-pull-refresh>
		<!--显示中奖号码的抽屉-->
		<uni-drawer :width="dwidth" ref="showRight" mode="right" :mask-click="true"
			@change="change($event,'showRight')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<van-sticky>
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="content">
									<view class="d-flex" style="font-size: 11px;">
										<!-- 购买 次 -->
										<text>{{i18n.user_page.lottery_order.t13}}</text>
										<view class="text-warning font-md px-1" style="font-size: 11px; color: #999;">
											{{goodItem.count_num}} {{i18n.common.ci}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</van-sticky>
					<view>
						<!--抽奖号码面板-->
						<text style="display: inline-block;float: left; margin: 10px 5px;font-size: 12px;width: 98rpx;"
							v-for="(item,index) in fightRecordList" :key="index">
							{{item.fight_num}}
						</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
	</view>

</template>

<script>
	import lotteryMyNumber from "@/components/lotteryMyNumber/lotteryMyNumber.vue"
	import {
		getMyFightRecordList,
		getAllUserParticipation
	} from '@/api/lottery.js';


	import {
		toLogin,
		checkLogin
	} from '@/libs/login';

	import {
		LOGIN_STATUS,
		UID
	} from '@/config/cache';
	import Cache from '@/utils/cache';


	export default {
		comments: {
			lotteryMyNumber
		},
		onLoad(option) {
			this.status = option.status;
			//Promise.all([this.getMyFightRecordList()]);
		},
		data() {
			return { ///dfddd
				//是否显示空菜单
				// status: '全部',
				// defaultImg: required("./static/img/default_img.png"),
				isEmpty: false,
				goodItem: {},
				goodList: [],
				fightRecordList: [],
				dwidth: 300,
				loading: false,
				finished: false,
				refreshing: false,
				currentPage: 1
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
			// status() {
				// return this.i18n.common.all // 全部
			// }
		},
		onReady: function() {
			if (this.status === '进行中') {
				uni.setNavigationBarTitle({
					title: this.i18n.user_page.t9
				});
			}else if (this.status === '已揭晓') {
				uni.setNavigationBarTitle({
					title: this.i18n.user_page.t10
				});
			} else {
				uni.setNavigationBarTitle({
					title: this.i18n.user_page.t6
				});
			}
		},
		methods: {
			getStatus(arg){
				if('已揭晓' == arg.status) {
					if(arg.win_user_id != getUID( )) {
						return 'losing lottery';
					} else {
						return 'winning';
					}
				} else if('未中奖' == arg.status) {
					return 'losing lottery';
				} else if('已中奖' == arg.status) {
					return 'winning';
				} else if('进行中' == arg.status) {
					return 'under way';
				}
				return '';
			},
			getUID() {
				return Cache.get(UID);
			},
			onLoad2() {
				let data = {
					user_id: Cache.get(UID),
					status: this.status,
					page: this.currentPage,
					limitNum: 5
				};
				let that = this;
				getMyFightRecordList(data).then(res => {
					that.loading = false;
					if (res == undefined || res.length <= 0) {
						that.finished = true;
						if (that.currentPage <= 1)
							that.isEmpty = true;
						return;
					}
					res.forEach(item => {
						that.goodList.push(item);
					})
					//console.log(that.fightRecordList)
					that.currentPage = that.currentPage + 1;
				});
			},
			onRefresh() {
				let that = this;
				// 清空列表数据
				//this.finished = false;
				this.refreshing = true;
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				//this.loading = true;
				setTimeout(function() {
					that.onLoad2();
					that.refreshing = false;
				}, 1000);

			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}, // 打开窗口
			showDrawer(data) {
				//console.log(data)
				let that = this;
				this.$refs['showRight'].open();
				this.goodItem = data;
				getAllUserParticipation({
					user_id: Cache.get("UID"),
					goods_fight_id: that.goodItem.id
				}).then(res => {
					that.fightRecordList = res.fightRecordList;
				});
			},
			itemClick(item) {
				console.log(item.id);

				uni.navigateTo({
					url: '/pages/lottery/good_details/good_details?id=' + item.id
				});
				// let e=data.status;
				// let item=data.item;
				// let that=this;
				// this.$refs[e].open();
				// this.selectedUser=item;
				// getAllUserParticipation({user_id:item.user_id,goods_fight_id:this.goods_fight_id}).then(res=>{
				// 	this.$set(that.selectedUser,"fightRecordList",res.fightRecordList);
				// 	console.log(that.selectedUser)
				// });
			},
			getMyFightRecordList() {
				let that = this;
				let data = {
					user_id: Cache.get(UID),
					status: this.status,
				}
				getMyFightRecordList(data).then(res => {
					that.goodList = res;
				});
			},
			dataFormat(time) {
				return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}
			                     ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
			},
			goLottery() {
				console.log("ssss")
				uni.switchTab({
					url: "/pages/lottery/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/font.css";
	.custom-image .van-empty__image {
		width: 90px;
		height: 90px;
	}

	.van-pull-refresh {
		overflow-y: auto;
	}

	.no-br{
		border: none;
	}

	.my-no-top{
		width: 96%;
		margin: 16upx auto;
	}

	.text-black{
		color: #787878;
	}
	.b2{
		padding-left: 10upx;
		color: #b2b2b2;
	}
	/deep/ .van-empty__image{
		width: 200upx;
		height: 200upx;
	}
	/deep/ .van-button--warning{
		background-color: #e93323;
    	border: 1px solid #e93323;
	}
</style>
